<template>
  <div class="containers">
    <el-header>
      <header-vue></header-vue>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <el-menu
          style="width: 100%;box-sizing: border-box;"
          :default-active="activeIndex"
          class="el-menu-vertical-demo el-menu"
          @select="handleSelect"
          background-color="#fff"
          text-color="black"
          active-text-color="rgb(49,148,185)">
          <ul class="rules2">
            <li class="ruleitem" v-for="(item,index) in sidebarData">
              <el-menu-item :index = index.toString()>
                <i class="fa fa-sitemap fa-icon-styles" :class="IconData[index]"></i>
                <span slot="title">{{item.description}}</span>
              </el-menu-item>
            </li>
          </ul>
        </el-menu>
      </el-aside>
      <el-main>
        <component :is="partView"></component>
      </el-main>
    </el-container>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="29%"
      style="text-align: center"
      :before-close="handleClose"
      :modal-append-to-body="false">
      <el-form :model="passwordForm" :rules="passwordFormRules" ref="passwordFormRules" label-width="100px">
        <el-form-item label="原密码:" prop="oldpass">
          <el-input v-model="passwordForm.oldpass" type="password"></el-input>
        </el-form-item>
        <p style="text-align: left;font-size: 12px;margin-left: 70px;padding: 0 10px;color: red;">请输入6位数或以上的密码（必须包含大写、小写字母和数字的组合）</p>
        <el-form-item label="新密码:" prop="newpass">
          <el-input v-model="passwordForm.newpass" type="password" @blur="newPassblurEvent(passwordForm.newpass)"></el-input>
          <span class="ts_span" style="font-size: 12px;" v-if="newPassTs">密码格式不正确</span>
        </el-form-item>
        <el-form-item label="确认密码:" prop="confpass">
          <el-input v-model="passwordForm.confpass" type="password" placeholder="请再次输入新密码"
                    @blur="oldPassblurEvent()"></el-input>
          <span class="ts_span" style="font-size: 12px;"  v-if="oldPassTs">两次密码不匹配，请重新输入</span>
        </el-form-item>
      </el-form>
      <button style="background: rgb(49, 148, 185);width: 80px;height: 40px;color: white;border-radius: 3px;border: 0" @click="changePassword">确 定</button>
    </el-dialog>
  </div>
</template>

<script>
  import {http} from '../../assets/commonjs/axios';
  import {$aos} from '../../store/state';
  import headerVue from '../common/HeaderVue';
  import updatePwd from './auditInfo/auditInfo';
  import personalInfo from './PersonalInfo/personalInfo';
  import unitManage from './UnitSettings/unitManage';
  import userManage from './UnitSettings/userManage';
  import userManagement from './templateSettings/userManagement';
  import fileManagement from './fileManagement/fileManagement'
  import {mmyzT} from "../../assets/commonjs/utils";

  export default {
    name: "containers",
    data() {
      return {
        passwordForm: {
          oldpass: '',
          newpass: '',
          confpass: '',
        },
        passwordFormRules: {
          oldpass: [
            {required: true, message: '请填写原密码', trigger: 'blur'}
          ],
          newpass: [
            {required: true, message: '请填写新密码', trigger: 'blur'}
          ],
          confpass: [
            {required: true, message: '请再次输入新密码', trigger: 'blur'}
          ],
        },
        oldPassTs: false,//用于判断两次密码是否一致
        newPassTs:false,//新密码的格式错误提示
        sidebarData:[],
        IconData:[],
        activeIndex: '1',
        partView: '',
        token: '',
        roleType:'',
        dialogVisible:false,
      }
    },
    components: {
      headerVue,
      updatePwd,
      personalInfo,
      unitManage,
      userManage,
      userManagement,
      fileManagement,
    },
    created() {
      $aos.getItem('userName').then(res => {
        if (res) {
          $aos.getItem('sideNum').then(res => {
            this.activeIndex = res ? res : '0';
            $aos.getItem('loginData').then(res => {
              this.roleType = res.role.roleType;
              this.sidebarData = res.role.dirRightList;
            })
            $aos.getItem('duty').then(res => {
              if(res === 'first'){
                this.dialogVisible = true;
              }else{
                this.handleSelect(this.activeIndex);
              }
            })
          })


        }else{
          this.$message({type: "warning", message: "现在的状态属于未登录状态，请重新登录"})
          setTimeout(()=> {
            this.$router.push({path: "/user/login"});
          },500);
        }
      })
    },
    methods: {
      //旧密码与新密码验证是否一致
      oldPassblurEvent() {
        if(this.passwordForm.confpass){
          if (this.passwordForm.newpass === this.passwordForm.confpass) {
            this.oldPassTs = false;
          } else {
            this.oldPassTs = true;
          }
        }else{
          this.oldPassTs = false;
        }
      },
      //新密码验证
      newPassblurEvent(val){
        if(val){
          let yzjg = mmyzT(val);
          if(yzjg){
            this.newPassTs = false;
          }else{
            this.newPassTs = true;
          }
        }else{
          this.newPassTs = false;
        }
      },

      changePassword(){
        if(this.passwordForm.oldpass && this.passwordForm.newpass && !this.newPassTs && this.passwordForm.confpass && !this.oldPassTs){
          http('post','permission/reset_password',{
            oldPassword:this.passwordForm.oldpass,
            newPassword:this.passwordForm.newpass,
          }).then(res=>{
            if(res.data.success){
              let duty = res.data.data.duty
              $aos.setItem("duty",duty);
              this.handleSelect(this.activeIndex);
              this.dialogVisible = false;
              this.$message({message: res.data.msg, type: 'success'});
            } else {
              this.$message({message: res.data.msg, type: 'warning'});
            }
          })
        }
      },
      handleClose(){
      },
      IsLogin() {
        http('post', 'SystemManager/IsLogin', {
          token: this.token
        }).then(response => {
          console.log(response)

        })
      },
      handleSelect(key) {
        if(this.roleType === 0){
          this.IconData = ['fa-sitemap','fa-houzz','fa-eercast','fa-envelope-open-o','el-icon-upload','el-icon-edit-outline']
          switch (key) {
            case '0':
              this.partView = 'unitManage';
              break;
            case '1':
              this.partView = 'userManagement';
              break;
            case '2':
              this.partView = 'updatePwd';
              break;
            case '3':
              this.partView = 'personalInfo';
              break;
            case '4':
              this.partView = 'fileManagement';
              break;
            default:
              this.partView = 'unitManage';
              break;

          }
        }else if(this.roleType === 5){
          this.IconData = ['fa-houzz','fa-eercast','fa-envelope-open-o']
          switch (key) {
            case '0':
              this.partView = 'userManage';
              break;
            case '1':
              this.partView = 'updatePwd';
              break;
            case '2':
              this.partView = 'personalInfo';
              break;
          }
        }else if (this.roleType === 4){
          this.IconData = ['fa-eercast','fa-envelope-open-o']
          switch (key) {
            case '0':
              this.partView = 'updatePwd';
              break;
            case '1':
              this.partView = 'personalInfo';
              break;
          }
        }
        $aos.setItem('sideNum',key)
      }
    },
  }
</script>

<style scoped>
  .containers {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #fff;
  }

  ul,li{
    margin: 0;
    padding: 0;
  }

  .ruleitem {
    list-style: none;
  }

  .el-header {
    background: rgb(48, 48, 70);
    height: 65px !important;
    padding: 0 !important;
  }

  .el-aside {
    background: #fff;
    height: 97%;
    padding-bottom: 3%;
    border-right: 1px solid #ccc;
  }

  .el-container {
    height: 100%;
  }

  .el-menu {
    border: 0;
  }

  .el-main {
    height: 100%;
    background: #ecf0f5;
    position: relative;
  }

  .systemTitle {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 30px;
    color: rgba(221, 221, 221, 0.22);
    transform: translate(-50%, -50%);
  }

  .fa-icon-styles {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle
  }
  .ts_span{
    margin-bottom: -20px;
    line-height: 20px;
    display: block;
    width: 100%;
    color: red;
    cursor: default;
    text-align: left;
  }

</style>
